<template>
  <el-form-item
    :rules="item.rule"
    :label="item.label"
    :prop="item.prop"
    :class="suffixShow ? 'noneSuffix' : ''"
  >
    <div class="mix" @mouseover="itemMouseover(item)" @mouseout="itemMouseout">
      <el-input
        class="el-dropdown-link"
        v-if="item.disabled === true"
        :value="list.length === 0 ? '' : '已选择' + list.length + '条'"
        :readonly="item.children ? true : false"
        :disabled="item.disabled ? true : false"
        placeholder="请选择"
        suffix-icon="el-icon-arrow-down"
      >
      </el-input>
      <el-dropdown
        v-if="item.disabled === false || item.disabled === undefined"
        @visible-change="onVisible"
        :hide-on-click="false"
        trigger="click"
        ref="elm"
      >
        <el-input
          class="el-dropdown-link"
          :value="list.length === 0 ? '' : '已选择' + list.length + '条'"
          :readonly="item.children ? true : false"
          :placeholder="
            item.placeholder === undefined ? '请输入' : item.placeholder
          "
          suffix-icon="el-icon-arrow-down"
        >
        </el-input>
        <el-dropdown-menu
          slot="dropdown"
          :style="{ minWidth: selectMoreWidth }"
        >
          <el-input
            class="searcher"
            v-if="item.isSearcher"
            v-model="value"
          ></el-input>
          <div
            ref="scrollbarDiv"
            class="scrollbarDiv"
            :style="{ minWidth: selectMoreWidth }"
          >
            <el-checkbox
              v-if="item.isCheckAll"
              class="checkALL"
              :indeterminate="isIndeterminate"
              v-model="checkAll"
              @change="handleCheckAllChange"
              >全选</el-checkbox
            >
            <el-checkbox-group
              v-model="list"
              @change="handleCheckedChange"
              :style="{ minWidth: selectMoreWidth }"
            >
              <el-dropdown-item
                v-for="child in item.children"
                :key="child.code"
                @click.native="onCommand(child.code, $event)"
              >
                <el-checkbox :label="child.code">{{ child.label }}</el-checkbox>
              </el-dropdown-item>
            </el-checkbox-group>
          </div>
        </el-dropdown-menu>
      </el-dropdown>
      <span
        class="el-input__suffix-inner smsuffix"
        v-show="suffixShow"
        @click="clear"
      >
        <i class="el-input__icon el-range__close-icon el-icon-circle-close"></i>
      </span>
    </div>
  </el-form-item>
</template>

<script>
import Scrollbar from "../../utils/Scrollbar";
import _ from "lodash";

export default {
  name: "selectMultipleCom",
  props: {
    item: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      selectMoreWidth: "210px",
      value: "",
      list: [],
      checkAll: [],
      isIndeterminate: false,
      deliver: "",
      suffixShow: false
    };
  },
  computed: {
    orData() {
      return this.formData[this.item.prop];
    }
  },
  watch: {
    value(val) {
      if (this.item.searcher) {
        this.item.searcher(val, this.item);
      }
    },
    orData(val) {
      this.list = val;
    },
    "item.children": function() {
      this.handleCheckedChange(this.list);
    }
  },
  created() {
    this.list = this.formData[this.item.prop]
      ? this.formData[this.item.prop]
      : [];
  },
  mounted() {
    this.$nextTick(() => {
      this.changeSelectMoreWidth();
    });
  },
  methods: {
    handleCheckAllChange(val) {
      const temp = this.item.children.map(res => res.code);
      this.list = val ? temp : [];
      this.isIndeterminate = false;
      this.syncData(this.list);
      if (this.item.change) {
        this.item.change(this.list, this.item);
      }
    },
    handleCheckedChange(value) {
      if (!this.item.isCheckAll) return;
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.item.children.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.item.children.length;
    },
    changeSelectMoreWidth() {
      if (this.$refs.elm && this.$refs.elm.$el) {
        this.selectMoreWidth = this.$refs.elm.$el.offsetWidth + "px";
      }
    },
    onVisible(isVisible) {
      this.changeSelectMoreWidth();
      this.value = "";
      let scrollbar = this.scrollbar;
      if (!scrollbar) {
        scrollbar = this.scrollbar = new Scrollbar(this.$refs.scrollbarDiv);
      }
      scrollbar.show();
      if (this.item.visibleChange) {
        this.item.visibleChange(isVisible);
      }
    },
    onCommand(value, e) {
      e.stopPropagation();
      e.preventDefault();
      let index = _.indexOf(this.list, value);
      if (index > -1) {
        this.list.splice(index, 1);
      } else {
        this.list.push(value);
      }
      this.deliver = value;
      this.syncData(this.list);
      if (this.item.change) {
        this.item.change(this.list, this.item);
      }
    },
    syncData(values) {
      this.formData[this.item.prop] = values;
    },

    itemMouseover(item) {
      if (
        (item.disabled === false || item.disabled === undefined) &&
        this.formData[item.prop] &&
        this.formData[item.prop].length > 0
      ) {
        this.suffixShow = true;
      }
    },
    itemMouseout() {
      this.suffixShow = false;
    },
    clear() {
      this.list = [];
      this.formData[this.item.prop] = [];
    }
  }
};
</script>

<style scoped lang="scss">
.mix {
  position: relative;
}
.searcher {
  margin: 0 8px;
  width: calc(100% - 16px);
}

.scrollbarDiv {
  height: 212px;
}

.scrollbar-wrap {
  overflow-x: hidden;
}

::v-deep .el-checkbox-group {
  margin-top: 8px;
  margin-bottom: 8px;
}

::v-deep .el-dropdown-menu__item {
  height: 40px;
  line-height: 40px;
}

.noneSuffix {
  ::v-deep .el-input__suffix {
    display: none;
  }
}

.smsuffix {
  position: absolute !important;
  right: 3px !important;
  color: #c0c4cc !important;
  font-size: 14px;
}

.checkALL {
  margin-left: 10px;
  margin-top: 8px;
  margin-bottom: -8px;
}
</style>
